<template>
  <div>
    <el-dialog width="80%" :visible.sync="dialogVisible" @close="onClose" :title="title">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="250px"
               label-position="left">
        <el-form-item  label="规则类型" prop="destroynumber">
          <el-radio-group v-model="formData.type">
            <el-radio :label="2">市场规则</el-radio>
            <el-radio :label="1">飞机规则</el-radio>
            <el-radio :label="3">转赠规则</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item  label="新增规则" prop="energyPerStamina">
          <div v-for="(item,index) in formData.rules" :key="index" class="rulesStyle">
            <div style="display: flex; align-items: center;width: 100%">
              <el-input v-model="item.title" placeholder="规则名称"></el-input>
              <div class="butStyle">
                <el-button type="primary" @click="addRules">新增</el-button>
                <el-button type="danger" @click="removeRules(index)" v-if="formData.rules.length>1">删除</el-button>
              </div>
            </div>
            <div style="margin-top: 2px">
              <div v-for="(t,i) in item.details" :key="i" style="display: flex; align-items: center;width: 100%;margin-top: 5px">
                <el-input v-model="item.details[i]" placeholder="规则信息"></el-input>
                <div style="margin-left: 10px">
                  <el-button type="danger" @click="tRemove(index,i)" v-if="item.details.length>1">删除</el-button>
                </div>
              </div>
              <div style="margin-top: 2px">
                <el-button @click="addDetail(index)">添加规则信息</el-button>
              </div>
            </div>

          </div>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {mRulADD, mRulUpdate,mRulListSee} from "@/api/user/user"

export default {
  data() {
    return {
      dialogVisible: false,
      title: '编辑',
      formData: {
        type:2,
        rules:[
          {
            title:'',
            details:['']
          }
        ]
      },
      rules: {

      },
      id:null

    }
  },
  methods: {
    // 删除介绍
    tRemove(index,i){
      this.formData.rules[index].details.splice(i,1)
    },
    // 删除规则
    removeRules(index){
      this.formData.rules.splice(index,1)
    },
    // 新增规则明细
    addDetail(index){
      this.$nextTick(()=>{
        this.formData.rules[index].details.push('')
      })
    },
    // 新增规则名称
    addRules(){
      this.formData.rules.push(  {
        title:'',
        details:['']
      })
    },
    async getSee(type){
     let res = await mRulListSee({type:type})
      this.formData = res.data.rulList[0]
    },
    // 弹窗
    async onOpen(type) {
      if(type){
        this.id = true
        this.title="编辑"
        this.getSee(type)
      }else{
        this.formData.type=2
        this.id = false
        this.title="新增"
      }
      this.dialogVisible = true
    },
    onClose() {
      this.dialogVisible = false
      this.$refs['elForm'].resetFields()
      this.formData.type=0
      this.formData.rules=[
        {
          title:'',
          details:['']
        }
      ]
    },
    close() {
      this.dialogVisible = false
    },
    // 提交数据
    async handleConfirm() {
      let iShow = false
      this.formData.rules.forEach(item=>{
        if(!item.title){
          this.$message({
            message: '请填写规则名称',
            type: 'warning'
          });
          iShow = true
          return
        }

        item.details.forEach(t=>{
          if(!t){
            this.$message({
              message: '请填写规则明细',
              type: 'warning'
            });
            iShow = true
            return
          }
        })
      })

      if(iShow){
        return
      }
      let objs = {
        rulList:[]
      }
      objs.rulList.push(this.formData)
      this.loading = true
      if (this.id) {
        try {
          // 编辑
          await mRulUpdate(objs)
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.$emit('success')
          this.onClose()
          this.loading = false
        } catch (error) {
          this.loading = false
        }
      } else {
        try {
          // 新增
          await mRulADD(objs)
          this.$message({
            message: '新增成功',
            type: 'success'
          });
          this.$emit('success')
          this.onClose()
          this.loading = false
        } catch (error) {
          this.loading = false
        }
      }
    },
  }
}

</script>
<style scoped>
.butStyle{
  display: flex;
  align-content: center;
  margin-left: 10px;
}
.rulesStyle{
  display: flex;
  flex-direction: column;
  align-content: center;
  margin-bottom: 5px;
}

</style>
